<template>
	<scroll-view class="page" scroll-y="true" @scrolltolower="loadDataFn">
		<xzfx-empty v-if="list.length === 0" tips="暂无运单" />
		<xzfx-waybill-list :list="list" style="margin-top: 0;" @success="refreshData" />
		<xzfx-divider v-if="list.length > 10">{{ dividerTitle }}</xzfx-divider>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				list: [],
				pageNo: 1,
				pageSize: 10,
				dividerTitle: "暂无更多"
			};
		},
		created() {
			this.getDataFn()
		},
		methods: {
			refreshData(){
				this.searchInfo = {
					truckType: "",
					shareStatus: ""
				};
				this.pageNo = 1;
				this.pageSize = 10;
				this.total = 0;
				this.list = [];
				this.getDataFn()
			},
			loadDataFn(){
				if(this.total > this.list.length){
					this.pageNo = this.pageNo + 1
					this.getDataFn()
				}else{
					this.dividerTitle = "暂无更多"
				}
			},
			getDataFn(){
				this.dividerTitle = "加载中......"
				this.$apis.waybill.getList({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					this.dividerTitle = "暂无更多"
					this.total = res.total
					this.list = this.list.concat(res.items)
				}).catch(err => {
					this.dividerTitle = "暂无更多"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		min-height: 100vh;
		::v-deep .xzfx-waybill-list{
			margin: $xzfx-spacing;
			.xzfx-waybill-item:first-child{
				margin-top: 0;
			}
		}
	}
</style>
